<template>
	<view class="my-order">
		<view class="my-order-tabs">
			<view class="tabs">
				<u-tabs :list="list1" :duration="duration" v-model="current" @click="handleClick" lineWidth="48rpx"
					lineColor="#40C6A1" lineHeight='12rpx' :activeStyle="activeStyle" :inactiveStyle="inactiveStyle"
					:itemStyle="itemStyle"></u-tabs>
			</view>
			<scroll-view scroll-y class="scroll-view">
				<view v-if="current === 0">
					<view class="u-tabs-one" v-for="v,i in listShow" :key="i">
						<view class="u-tabs-one-con">
							<view class="u-tabs-one-con-tit" :class="v.type==2?'bg-3':v.type==0?'bg-2':'bg-1'">
								<view class="">
									消费金额 {{v.price}}元
								</view>
								<text>{{v.type==2?'已取消':v.type==0?'未完成':'已完成'}}</text>
							</view>
							<view class="u-tabs-one-con-message">
								<view class="">
									使用门店：{{v.store_name}}-{{v.room_name}}
								</view>
								<view class="">
									使用时间：{{moment(v.starttime).format('YYYY-MM-DD HH:mm')}}-
									{{moment(v.endtime).format('HH:mm')}}
								</view>
								<view class="">
									下单时间：{{moment(v.createtime*1000).format('YYYY-MM-DD HH:mm:ss')}}
								</view>
								<view class="">
									支付方式：{{['卡券支付','余额支付','微信支付','其他支付'][v.pay_way-1]}}
								</view>
								<view class="u-tabs-one-con-message-fz">
									<text>订单编号：{{v.order_num}}</text>
									<text @click="copyNumber(v.order_num)">复制</text>
								</view>
								<!-- v-if="item.is_refunded===0" -->
								<!--  -->
								<view class="u-tabs-one-con-btn" v-if="!v.type">
									<view class="cancel-btn" @click="showCancel(v.id,i)">取消预约</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view v-if="current === 1">
					<view class="u-tabs-one" v-for="v,i in listShow" :key="i">
						<view class="u-tabs-one-con">
							<view class="u-tabs-one-con-tit">
								<view class="">
									消费金额 {{v.price}}元
								</view>
								<text>未完成</text>
							</view>
							<view class="u-tabs-one-con-message">
								<view class="">
									使用门店：{{v.store_name}}-{{v.room_name}}
								</view>
								<view class="">
									使用时间：{{moment(v.startime).format('YYYY-MM-DD HH:mm')}}-
									{{moment(v.endtime).format('HH:mm')}}
								</view>
								<view class="">
									下单时间：{{moment(v.createtime*1000).format('YYYY-MM-DD HH:mm:ss')}}
								</view>
								<view class="">
									支付方式：{{['卡券支付','余额支付','微信支付','其他支付'][v.pay_way-1]}}
								</view>
								<view class="u-tabs-one-con-message-fz">
									<text>订单编号：{{v.order_num}}</text>
									<text @click="copyNumber(v.order_num)">复制</text>
								</view>
								<!-- v-if="item.is_refunded===0" -->
								<!--  -->
								<view class="u-tabs-one-con-btn">
									<view class="cancel-btn" @click="showCancel(v.id,i)">取消预约</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view v-if="current === 2">
					<view class="u-tabs-one" v-for="v,i in listShow" :key="i">
						<view class="u-tabs-one-con">
							<view class="u-tabs-one-con-titS">
								<view class="">
									消费金额 {{v.price}}元
								</view>
								<text>已完成</text>
							</view>
							<view class="u-tabs-one-con-message">
								<view class="">
									使用门店：{{v.store_name}}-{{v.room_name}}
								</view>
								<view class="">
									使用时间：{{moment(v.startime).format('YYYY-MM-DD HH:mm')}}-
									{{moment(v.endtime).format('HH:mm')}}
								</view>
								<view class="">
									下单时间：{{moment(v.createtime*1000).format('YYYY-MM-DD HH:mm:ss')}}
								</view>
								<view class="">
									支付方式：{{['卡券支付','余额支付','微信支付','其他支付'][v.pay_way-1]}}
								</view>
								<view class="u-tabs-one-con-message-fz">
									<text>订单编号：{{v.order_num}}</text>
									<text @click="copyNumber(v.order_num)">复制</text>
								</view>

							</view>
						</view>
					</view>

				</view>
				<view v-if="current === 3">
					<view class="u-tabs-one" v-for="v,i in listShow" :key="i">
						<view class="u-tabs-one-con">
							<view class="u-tabs-one-cons-tit">
								<view class="">
									消费金额 {{v.price}}元
								</view>
								<text>已取消</text>
							</view>
							<view class="u-tabs-one-con-message">
								<view class="">
									使用门店：{{v.store_name}}-{{v.room_name}}
								</view>
								<view class="">
									使用时间：{{moment(v.startime).format('YYYY-MM-DD HH:mm')}}-
									{{moment(v.endtime).format('HH:mm')}}
								</view>
								<view class="">
									下单时间：{{moment(v.createtime*1000).format('YYYY-MM-DD HH:mm:ss')}}
								</view>
								<view class="">
									支付方式：{{['卡券支付','余额支付','微信支付','其他支付'][v.pay_way-1]}}（原路返还）
								</view>
								<view class="u-tabs-one-con-message-fz">
									<text>订单编号：{{v.order_num}}</text>
									<text @click="copyNumber(v.order_num)">复制</text>
								</view>

							</view>
						</view>
					</view>

				</view>
				<no-data v-if="!listShow || listShow.length === 0" title='暂无订单'></no-data>
			</scroll-view>
		</view>
		<u-modal :closeOnClickOverlay="true" @cancel="copyWord" confirmColor="#606266" :show="show"
			:showCancelButton="true" style="border-radius: 24rpx 24rpx 24rpx 24rpx;">
			<view class="modal-content">
				<view class="pop-up-user">
					订单费用将全额原路退还，是否确认取消
				</view>
			</view>
		</u-modal>
	</view>
</template>
<script>
	import moment from 'moment'
	import {
		get_all_reservation_api,
		cancle_reservation_api
	} from '@/common/api.js'
	export default {
		data() {
			return {
				moment: moment,
				current: 0,
				// 订单编号
				serialNumber: 7472857374885949,
				listAll: [],
				listShow: [],
				show: false,
				list1: [{
					name: '全部',
				}, {
					name: '未完成',
				}, {
					name: '已完成'
				}, {
					name: '已取消'
				}],
				activeStyle: {
					color: '#606266',
					fontSize: '36rpx',
					fontWeight: 'bold',
					transform: 'scale(1.05)',
					marginLeft: '10rpx'
				},
				inactiveStyle: {
					color: '#909399',
					transform: 'scale(1)',
					fontSize: '28rpx',
					marginLeft: '20rpx'
				},
				itemStyle: {
					paddingRight: '30rpx',
					paddingBottom: '20rpx',
					height: '68rpx'
				},
				duration: 300,
				showTabs: false
			};
		},
		onLoad() {
			this.getAll()
		},
		onShow() {
			this.$nextTick(() => {
				setTimeout(() => {
					this.showTabs = true
				}, 400)
			})
		},
		methods: {
			getAll() {
				get_all_reservation_api().then(res => {
					this.listShow = this.listAll = res.data.map(e => {
						// console.log(e.endtime,moment(e.endtime).format('YYYY-MM-DD HH:mm:ss'),moment(e.endtime).valueOf(),Date.now() ,e);
						return {
							...e,
							type: +e.status == 2 ? 2 : +e.status !== 2 && moment(e.endtime).valueOf() >
								Date.now() ? 0 : 1
						}
					})
				})
			},
			copyWord() {
				this.show = false
			},
			// 取消弹窗
			showCancel(id, i) {
				uni.showModal({
					content: '订单费用将全额原路退还，是否确认取消',
					success: (res) => {
						if (res.confirm) {
							console.log('用户点击确定');
							this.cancleOrder(id, i)
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			handleClick({
				index
			}) {

				this.current = index
				this.listShow = []
				if (!index) return this.listShow = this.listAll
				this.listShow = this.listAll.filter((e) => {
					if (index == 3 && e.status == 2) {
						return e
					}
					if (index == 1 && e.type == 0) {
						return e
					}
					if (index == 2 && e.type == 1) {
						return e
					}
				})
				console.log(this.listAll);
				console.log(this.listShow, this.listShow.length);
			},
			cancleOrder(id, idx) {
				cancle_reservation_api({
					id
				}).then(res => {
					if (res.code == 1) {
						this.listAll = JSON.parse(JSON.stringify(this.listAll))
						this.listAll[idx].type = 2
						this.listAll[idx].status = 2
						if (!this.current) {
							// this.listShow = this.listShow.filter(e => e.id != id)
							this.listShow = this.listAll
						} else {
							this.listShow = this.listShow.filter(e => e.id != id)
						}
						// this.$forceUpdate()
						// console.log(this.listShow, this.listAll[idx]);
						this.updateUserInfo()
					}
					this.$u.toast(res.msg)
				})
			},
			// 复制订单编号
			copyNumber(serialNumber) {
				uni.setClipboardData({
					data: serialNumber.toString(),
				})
				uni.showToast({
					title: '复制成功',
					icon: 'success'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bg-1 {
		background: #088260 !important;
	}

	.bg-2 {
		background: #40C6A1 !important;
	}

	.bg-3 {
		background: #5A6965 !important;
	}

	.my-order-tabs {

		.tabs {
			width: 100%;
			margin-bottom: 48rpx;
		}

		.temp {
			height: 84rpx;
			width: 100%;
		}
	}

	.u-tabs-one-con {
		width: 702rpx;
		background: #F3F4F6;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin: 0 auto 24rpx;

		.u-tabs-one-con-tit {
			box-sizing: border-box;
			padding: 16rpx 24rpx;
			width: 702rpx;
			height: 88rpx;
			background: #40C6A1;
			border-radius: 16rpx 16rpx 0rpx 0rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			view {
				font-size: 36rpx;
				font-weight: 500;
				color: #FFFFFF;
			}

			text {
				font-size: 28rpx;
				font-weight: 400;
				color: #FFFFFF;
			}
		}

		.u-tabs-one-con-titS {
			box-sizing: border-box;
			padding: 16rpx 24rpx;
			width: 702rpx;
			height: 88rpx;
			margin-top: 48rpx;
			background: #088260;
			border-radius: 16rpx 16rpx 0rpx 0rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			view {
				font-size: 36rpx;
				font-weight: 500;
				color: #FFFFFF;
			}

			text {
				font-size: 28rpx;
				font-weight: 400;
				color: #FFFFFF;
			}
		}

		.u-tabs-one-cons-tit {
			box-sizing: border-box;
			padding: 16rpx 24rpx;
			width: 702rpx;
			height: 88rpx;
			margin-top: 48rpx;
			background: #5A6965;
			border-radius: 16rpx 16rpx 0rpx 0rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			view {
				font-size: 36rpx;
				font-weight: 500;
				color: #FFFFFF;
			}

			text {
				font-size: 28rpx;
				font-weight: 400;
				color: #FFFFFF;
			}
		}

		.complete {
			background: #088260;
		}

		.cancel {
			background: #5A6965;
		}

		.u-tabs-one-con-message {
			box-sizing: border-box;
			margin: 8rpx 24rpx 0;

			view {
				min-height: 50rpx;
				line-height: 50rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #606266;
			}

			.u-tabs-one-con-message-fz {
				display: flex;
				justify-content: space-between;
				padding-bottom: 24rpx;
			}

			.u-tabs-one-con-btn {
				border-top: 2rpx solid #C0C4CC;
				padding: 24rpx 0rpx;

				.cancel-btn {
					margin-left: auto;
					width: 184rpx;
					height: 58rpx;
					background: #40C6A1;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					text-align: center;
					color: white;
					line-height: 58rpx;
				}
			}
		}
	}

	.u-tabs-one-con-two {
		width: 702rpx;
		height: 370rpx;
		background: #F3F4F6;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin: 0 auto 24rpx;

		.u-tabs-one-con-tit {
			box-sizing: border-box;
			padding: 16rpx 24rpx;
			width: 702rpx;
			height: 88rpx;
			background: #40C6A1;
			border-radius: 16rpx 16rpx 0rpx 0rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			view {
				font-size: 36rpx;
				font-weight: 500;
				color: #FFFFFF;
			}

			text {
				font-size: 28rpx;
				font-weight: 400;
				color: #FFFFFF;
			}
		}

		.status2 {
			background: #088260;
		}

		.u-tabs-one-con-message {
			box-sizing: border-box;
			margin: 8rpx 24rpx 0;

			view {
				height: 50rpx;
				line-height: 50rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #606266;
			}

			.u-tabs-one-con-message-fz {
				display: flex;
				justify-content: space-between;

				text {
					color: #606266;
					font-size: 28rpx;
					font-weight: 400;
				}
			}
		}
	}

	.u-tabs-one-con-three {
		width: 702rpx;
		height: 370rpx;
		background: #F3F4F6;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin: 0 auto 24rpx;

		.u-tabs-one-con-tit {
			box-sizing: border-box;
			padding: 16rpx 24rpx;
			width: 702rpx;
			height: 88rpx;
			background: #5A6965;
			border-radius: 16rpx 16rpx 0rpx 0rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			view {
				font-size: 36rpx;
				font-weight: 500;
				color: #FFFFFF;
			}

			text {
				font-size: 28rpx;
				font-weight: 400;
				color: #FFFFFF;
			}
		}

		.u-tabs-one-con-message {
			box-sizing: border-box;
			margin: 8rpx 24rpx 0;

			view {
				height: 50rpx;
				line-height: 50rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #606266;
			}

			.u-tabs-one-con-message-fz {
				display: flex;
				justify-content: space-between;

				text {
					color: #606266;
					font-size: 28rpx;
					font-weight: 400;
				}
			}
		}
	}

	.pop-up {
		width: 628rpx;
		height: 274rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		border: 5rpx;
		text-align: center;

		.pop-up-tit {
			margin-top: 76rpx;
			margin-bottom: 22rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: #303133 100%;
		}

		.pop-up-bottom {
			display: flex;
			justify-content: space-evenly;
			margin-top: 76rpx;
			border-top: 2rpx solid #F3F4F6;

			text {
				height: 88rpx;
				line-height: 88rpx;
				font-size: 36rpx;
				font-weight: 500;
				color: #303133 100%;
			}

			.pop-up-bottom-one {
				padding-right: 124rpx;
				border-right: 2rpx solid #F3F4F6;
			}
		}
	}

	.modal-content {
		max-width: max-content;
		height: 137rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;

		.pop-up-user {
			height: 137rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-wrap: wrap;
			text-align: center;
		}
	}

	.u-tabs-one-con .u-tabs-one-con-titS.data-v-23ec6558 {
		margin-top: 0;
	}

	.u-tabs-one-con .u-tabs-one-cons-tit.data-v-23ec6558 {
		margin-top: 0;
	}

	.scroll-view {
		height: calc(100vh - 200rpx);
	}
</style>